<template>
  <view class="change-position" v-cloak>
    <view class="header-box">
      <view class="position-header">
        <view class="header-city" @click="handleChangeCity()">
          <image class="image" src="@/static/position-black.png" mode="aspectFill"></image>
          {{cityInfo.city || '选择城市'}}
        </view>
        <view class="header-search" @click="handleToSearch()">
          <uni-icons type="search" style="margin-right: 4rpx;" size="16" color="#B0B0B0"></uni-icons>
          <view class="input">搜索门店</view>
        </view>
      </view>
    </view>
<!--    <view class="position-tabs not-bar">
      <view class="tabs-item" :class="curTabs == 0?'active':''" @click="curTabs = 0">全部</view>
      <view class="tabs-item" :class="curTabs == 1?'active':''" @click="curTabs = 1">我的共生门店</view>
    </view> -->
    <map v-if="position.latitude" class="position-map" :latitude="position.latitude" :longitude="position.longitude" :markers="markers"></map>
    <view class="position-list" v-if="list.length">
      <view class="list-item" :class="item.id == curStore?'active':''" @click="handleSelectStore(item)" v-for="(item) in list" :key="item.id">
        <view class="item-title"><h2>{{item.name}}</h2></view>
        <view class="item-p">
          <image class="p-img" src="@/static/position-gray.png" mode="aspectFill"></image>
          <h4 v-if="item.distance">距您{{item.distance}}</h4>
          <view class="p-span dot">{{item.address}}</view>
        </view>
        <view class="item-p" v-if="item.timeSlotReq.startTime">
          <image class="p-img" src="@/static/time-gray.png" mode="aspectFill"></image>
          <view class="p-span dot">{{item.timeSlotReq.startTime}} - {{item.timeSlotReq.endTime}}</view>
        </view>
      </view>
    </view>
    <view class="var-empty" v-else>
      <image class="img" src="@/static/no-store.png" mode="aspectFill"></image>
      <view class="p">附近暂无可服务门店</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        position:uni.getStorageSync('position'),
        curTabs:0,
        cityInfo:{},
        list:[],
        params:{
          page:1,
          pageSize:10
        },
        moreStatus:'more',
        markers: [],
        selectStore:{}
      };
    },
    computed: {
      curStore(){
        let value = null
        this.list.map((res,idx)=>{
          if(res.id == this.selectStore.id){
            value = res.id
          }
        })
        return value;
      }
    },
    onShow() {
      uni.hideHomeButton()
      this.cityInfo = uni.getStorageSync('cityInfo')
      this.list = []
      this._initData()
      if(uni.getStorageSync('selectStore')){
        let value = uni.getStorageSync('selectStore')
        this.selectStore = value || {}
        this.position = {
          ...value,
          latitude: parseFloat(value.latitude),
          longitude: parseFloat(value.longitude),
        }
        this.markers = [{
          id:1,
          latitude: parseFloat(value.latitude),
          longitude: parseFloat(value.longitude),
          name: value.name,
          iconPath: "https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/empty/logo.png",
          title: value.name,
          width: 20,
          height: 30,
          callout: {
            content: value.name,
            color: '#000000',
            bgColor: '#ffffff', //需要6位的色值有效
            fontSize: 12,
            borderRadius: 20,
            padding: 5,
            display: 'ALWAYS'
          }
        }]
      }
    },
    onUnload(){
      if(!uni.getStorageSync('selectStore')){
        uni.setStorageSync('selectStore',this.list[0])
        uni.$emit('changeStore')
      }
    },
		onReachBottom() {
      // if(this.params.total > this.list.length){
      //   ++this.params.page;
      //   this._initData()
      // }else{
      //   this.moreStatus="no-more"
      // }
		},
    methods:{
      handleChangeCity(){
        uni.navigateTo({
          url:'/mainPackage/city-list'
        })
      },
      handleToSearch(){  //  搜索门店
        uni.navigateTo({
          url:'/mainPackage/search'
        })
      },
      handleSelectStore(e){  ///  选择门店
        uni.setStorageSync('selectStore',e)
        uni.$emit('changeStore')
        uni.navigateBack({
          fail:()=>{
            uni.reLaunch({
              url:'/pages/index/index'
            })
          }
        })
      },
      
      _initData(){
        uni.showLoading({
          title:'加载中...'
        })
        const data = {
          cityCode:uni.getStorageSync('cityInfo').cityCode,
        }
        if(uni.getStorageSync('position').latitude){
          Object.assign(data,{
            latitude:uni.getStorageSync('position').latitude,
            longitude:uni.getStorageSync('position').longitude,
          })
        }
        this.$get('/merchant/v1/cities/selectCityOrg',data,'1').then(res=>{
          if(res.code == '1'){
            this.list = res.content
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.change-position{
  min-height: 100vh;
  background: var(--page-bg);
  .header-box{
    padding: 12rpx 24rpx 24rpx;
    background: #fff;
  }
  .position-header{
    display: flex;
    align-items: center;
    padding: 28rpx 24rpx;
    border-radius: 62rpx;
    background: var(--page-bg);
    font-size: 26rpx;
    .header-city{
      display: flex;
      align-items: center;
      color: var(--title-color);
      margin-right: 16rpx;
      padding-right: 16rpx;
      border-right: 2rpx solid var(--border-color);
      font-weight: bold;
      .image{
        width: 26rpx;
        height: 26rpx;
        margin-right: 4rpx;
      }
    }
    .header-search{
      display: flex;
      align-items: center;
      .input{
        line-height: 1;
        color: var(--sub-title);
      }
    }
  }  ///  position-header end
  
  .position-tabs{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding-left: 24rpx;
    overflow-x: auto;
    .tabs-item{
      font-size: 28rpx;
      color: #6D6D6D;
      position: relative;
      padding: 28rpx 0;
      margin-right: 44rpx;
      white-space: nowrap;
      &::after{
        position: absolute;
        display: block;
        content: '';
        width: 34rpx;
        height: 6rpx;
        background: transparent;
        bottom: 14rpx;
        left: 50%;
        transform: translate(-50%,0);
      }
      &.active{
        font-weight: bold;
      }
      &.active::after{
        background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
      }
    }
  } /// position-tabs end
  
  .position-map{
    width: 100vw;
    height: 456rpx;
  }
  
  .position-list{
    background: var(--page-bg);
    padding: 24rpx 0;
    .list-item{
      margin: 0 24rpx;
      padding: 32rpx 24rpx;
      background: #fff;
      border-radius: 20rpx;
      border: 2rpx solid transparent;
      &.active{
        border-color: var(--theme-color);
      }
      .item-title{
        display: flex;
        align-items: center;
        h2{
          font-size: 26rpx;
          font-weight: bold;
          color: var(--title-color);
        }
        span{
          display: block;
          font-size: 18rpx;
          line-height: 1;
          margin-left: 10rpx;
          padding: 4rpx 6rpx;
          border-radius: 4rpx;
          color: #fff;
          background: var(--theme-color);
        }
      }
    }
    .item-p{
      display: flex;
      align-items: center;
      font-size: 22rpx;
      color: #B0B0B0;
      margin-top: 16rpx;
      .p-img{
        width: 26rpx;
        height: 26rpx;
        margin-right: 10rpx;
      }
      h4{
        margin-right: 20rpx;
        color: var(--title-color);
      }
    }
  }  //  position-list end
  
}
</style>
